<template>
	<view class="container">
		<view class="row mt15">
			<view class="label">卡号</view>
			<view class="value"><input type="text" class="input" v-model="cardnum" placeholder="输入视频卡卡号"></input></view>
		</view>

		<view class="row">
			<view class="label">密码</view>
			<view class="value"><input type="text" class="input" v-model="cardpsd" placeholder="输入视频卡密码"></input></view>
		</view>

		<view class="row mt15">
			<view class="label">手机号码</view>
			<view class="value">{{userInfo.name}}</view>
		</view>

		<view class="notice">
			<view class="p"><text>这里支持任意由佳音发行的充值卡的充值，只需要输入正确有效的卡号和密码即可进行充值。</text></view>
			<view class="p"><text>充值到账可能需要几分钟，请在充值无异议后，再丢弃充值卡</text></view>
		</view>

		<view class="submit"><button @click="onSubmitClick">充值</button></view>
		<view class="bottom" @click="onListClick"><text>我的视频卡></text></view>
	</view>
</template>

<script>
	import { runRechargeVideoCard } from '@/module/api'
    import WxNotificationCenter from '@/libs/WxNotificationCenter/wxnotificationcenter'

	const _ = require("@/libs/underscore/underscore-min.js")._
	
	export default {
		data() {
			return {
				cardnum: "",
				cardpsd: ""
			};
		},
		
		computed: {
			shareAppMessage () {
				return this.$store.state.shareAppMessage
			},
			
			userInfo () {
				return this.$store.state.userInfo
			}
		},
		
		methods: {
			onListClick () {
				uni.navigateTo({
					url: '/pages/video-card/list/list'
				})
			},
			
			onSubmitClick () {
				let _t = this
				let canSubmit = true
				let errorMsg = ''
				
				if (_.isEmpty(this.cardnum)) {
					errorMsg = '请输入视频卡卡号';
					canSubmit = false;
				} else if (_.isEmpty(this.cardpsd)) {
				    errorMsg = '请输入视频卡密码';
				    canSubmit = false;
				}
				
				if (canSubmit) {
					uni.showModal({
						title: '提示',
						content: '确定充值视频卡：' + this.cardnum +'？',
						success: (res) => {
							if (res.confirm) {
								_t.handleSubmit();
							}
						}
					})
				} else {
					wx.showToast({
						title: errorMsg,
						icon: 'none'
					});
				}
			},
			
			handleSubmit () {
				let _t = this
				
				let data = {
					card_number: this.cardnum,
					card_password: this.cardpsd,
					mobile: this.userInfo.name
				}
				
				uni.showLoading({
					mask: true,
					title: '请求中...'
				})
				
				runRechargeVideoCard({
					params: data,
					success: res => {
						uni.hideLoading()
						uni.navigateTo({
							url: '/pages/video-card/result/result?status=1&res=' + JSON.stringify(res)
						})
					},
					fail: res => {
						uni.hideLoading()
						if (res.code == -3000) {
							uni.navigateTo({
								url: '/pages/video-card/result/result?status=0&res=' + JSON.stringify(res)
							})
						} else {
							uni.showToast({
								icon: "none",
								title: res.msg
							})
						}
						
					},
					error: () => {
						uni.hideLoading()
						uni.showToast({
							icon: "none",
							title: "系统繁忙，请稍候再试"
						})
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.notice{
		padding: 40px 30px;
		
		.p{
			color: #999; 
			font-size: 28px;
			line-height: 1.6
		}
		
		.pt8{
			padding-top: 8px
		}
	}
	
	.row{
		background: #fff;
		border-bottom: 1px solid #f1f1f1;
		position: relative;
		
		.label{
			display: block;
			position: absolute;
			font-size: 32px;
			line-height: 108px;
			left: 20px;
			top: 0;
		}
		
		.value{
			height: 108px;
			line-height: 108px;
			font-size: 32px;
			padding-left: 210px;
			background: #fff;
			
			&.tar{
				text-align: right;
				padding-right: 15px;
			}
			
			.input{
				display: block;
				height: 108px;
				font-size: 32px;
				background: 0;
				width: 100%;
				background: #fff;
				box-sizing: border-box;
			}
		}
		
		.link{
			line-height: 60px;
			padding-left: 210px;
			background: #fff;
			color: #f40;
			font-size: 24px;
		}
		
		.btn{
			display: block;
			position: absolute;
			right: 0;
			top: 0;
			line-height: 108px;
			border-left: 1px solid #e5e5e5;
			padding: 0 20px;
			color: #FF5757;
			z-index: 10;
			font-size: 24px;
			
			&.wait{
				color: #999;
			}
		}
	}
	
	.submit{
		padding: 0 30px;
		margin-top: 40px;
		
		button{
			display: block;
			height: 80px;
			background: #FF5757;
			border-radius: 6px;
			line-height: 80px;
			color: #fff;
			font-size: 32px;
		}
	}
	
	.bottom{
		line-height: 60px;
		width: 400px;
		margin: 20px auto;
		text-align: center;
		color: #FF5757;
		font-size: 28px;
	}
</style>
